// 主界面布局组件 - 基于Figma设计和用户需求说明

import React from 'react';
import { useHmiState } from '../hooks/useHmiState';
import StatusPanel from './StatusPanel';
import ControlPanel from './ControlPanel';
import SystemMessages from './SystemMessages';
import Scene3D from './Scene3D';
import SettingsPanel from './SettingsPanel';
import EmergencyPanel from './EmergencyPanel';
import AutonomousModePanel from './AutonomousModePanel';
import ModuleStatusPanel from './ModuleStatusPanel';
import TripControlPanel from './TripControlPanel';
import NavigationPanel from './NavigationPanel';
import AutonomousStatusAlert from './AutonomousStatusAlert';
import VehicleDataPanel from './VehicleDataPanel';
import VehicleParametersPanel from './VehicleParametersPanel';
import ModuleControlPanel from './ModuleControlPanel';
import ConnectionStatus from './ConnectionStatus';
import { Minimize2, Maximize2, Settings, AlertTriangle } from 'lucide-react';

interface LayoutProps {
  userType: 'passenger' | 'safety_officer';
}

const Layout: React.FC<LayoutProps> = ({ userType: _userType }) => {
  const {
    isMinimized,
    currentView,
    switchView,
    toggleMinimized,
    userRole,
    vehicleStatus,
    isConnected,
    connectionStatus,
    reconnectToVehicleDomain
  } = useHmiState();

  const [showAutonomousMode, setShowAutonomousMode] = React.useState(false);
  const [showTripControl, setShowTripControl] = React.useState(false);

  if (isMinimized) {
    return (
      <div className="fixed top-4 right-4 z-50">
        <button
          onClick={toggleMinimized}
          className="glass-panel p-4 flex items-center gap-2 hover:bg-gray-700/50 transition-colors"
        >
          <Maximize2 size={20} />
          <span className="text-sm">展开HMI</span>
        </button>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 p-4">
      {/* 顶部状态栏 */}
      <div className="flex justify-between items-center mb-4">
        <div className="flex items-center gap-4">
          <h1 className="text-2xl font-bold text-white">软通动力自动驾驶小巴 HMI</h1>
          <span className="px-3 py-1 bg-primary-600 text-white rounded-full text-sm">
            {userRole.name}
          </span>
        </div>

        <div className="flex items-center gap-2">
          <ConnectionStatus
            isConnected={isConnected}
            connectionStatus={connectionStatus}
            onReconnect={reconnectToVehicleDomain}
          />

          {vehicleStatus.emergencyStop && (
            <div className="flex items-center gap-2 px-3 py-1 bg-danger-600 text-white rounded-lg">
              <AlertTriangle size={16} />
              <span className="text-sm font-medium">紧急状态</span>
            </div>
          )}

          <button
            onClick={() => switchView('settings')}
            className="hmi-button-secondary flex items-center gap-2"
          >
            <Settings size={16} />
            设置
          </button>

          <button
            onClick={toggleMinimized}
            className="hmi-button-secondary flex items-center gap-2"
          >
            <Minimize2 size={16} />
            最小化
          </button>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="grid grid-cols-12 gap-4 h-[calc(100vh-120px)]">
        {/* 左侧：3D场景 */}
        <div className="col-span-8">
          <Scene3D />
        </div>

        {/* 右侧：控制面板 */}
        <div className="col-span-4 space-y-4">
          {currentView === 'main' && (
            <>
              <StatusPanel />
              <NavigationPanel />
              <ControlPanel />
              {showAutonomousMode && <AutonomousModePanel />}
              {showTripControl && <TripControlPanel />}
              <ModuleStatusPanel />
              <VehicleDataPanel />
              <VehicleParametersPanel />
              <ModuleControlPanel />
              <SystemMessages />
            </>
          )}

          {currentView === 'settings' && (
            <SettingsPanel />
          )}

          {currentView === 'emergency' && (
            <EmergencyPanel />
          )}
        </div>
      </div>

      {/* 底部导航栏 */}
      <div className="fixed bottom-4 left-4 right-4">
        <div className="glass-panel p-4">
          <div className="flex justify-center gap-4">
            <button
              onClick={() => switchView('main')}
              className={`hmi-button ${
                currentView === 'main' ? 'bg-primary-600' : 'bg-gray-700 hover:bg-gray-600'
              }`}
            >
              主界面
            </button>
            <button
              onClick={() => setShowAutonomousMode(!showAutonomousMode)}
              className={`hmi-button ${
                showAutonomousMode ? 'bg-primary-600' : 'bg-gray-700 hover:bg-gray-600'
              }`}
            >
              自动驾驶模式
            </button>
            <button
              onClick={() => setShowTripControl(!showTripControl)}
              className={`hmi-button ${
                showTripControl ? 'bg-primary-600' : 'bg-gray-700 hover:bg-gray-600'
              }`}
            >
              启动行程
            </button>
            <button
              onClick={() => switchView('settings')}
              className={`hmi-button ${
                currentView === 'settings' ? 'bg-primary-600' : 'bg-gray-700 hover:bg-gray-600'
              }`}
            >
              设置
            </button>
            <button
              onClick={() => switchView('emergency')}
              className={`hmi-button ${
                currentView === 'emergency' ? 'bg-danger-600 hover:bg-danger-500' : 'bg-gray-700 hover:bg-gray-600'
              }`}
            >
              紧急控制
            </button>
          </div>
        </div>
      </div>

      {/* 自动驾驶状态提示弹窗 */}
      <AutonomousStatusAlert />
    </div>
  );
};

export default Layout;
